{extends file="assets::smarty-templates::Master"|ToPath}

{block name=content}

{html_css file="whiteLabel/light/editor.css"}
{html_script src="WhiteLabel.Editor.js"}

<form action="{$action}" method="post">
    <div id="contact-list" class="ui-widget">
        <label for="add">Para: </label>
        <ul id="list" class="dash">
            {foreach $emails as $email}
            <li id="{$email[0]}_" class="email">
                <span class="text">{$email[0]} {if isset($email[1])}{$email[1]}{/if}</span>
                <button id="{$email[0]}" title="Quitar de la lista" class="delete-email i_cross icon"></button>
                <input type="hidden" value="{$email[0]}" name="{bind name="Emails[]" to="Emails"}" >
            </li>
            {/foreach}
            <li id="add-mail">
                <span class="text">
                    <input id="add" style="width: 80px;" type="text" title="Escribe un codigo de estudiante y presiona 'Enter'" maxlength="10" />
                </span>
            </li>
        </ul>
    </div>
    <div>
        <label for="subject">Asunto:</label> 
        <input type="text" name="{bind name="subject" to="Subject"}" id="subject" class="lf" />
    </div>
    <div>
        <textarea cols="" rows="" id="subject" name="{bind name="message" to="Message"}" class="editor html"></textarea>
    </div>
    <div>
        <input type="submit" value="Enviar mensaje" /> o <a href="{$cancel}">Cancelar</a>
    </div>
</form>


<script type="text/javascript">
    {literal}
    jQuery.noConflict();
    jQuery(document).ready(function($){
        $(".editor").wl_Editor();
            
        $(".delete-email").live("click", function(){
            var id = "#" + this.id + "_";
            $(id).remove();
            return false;
        });
            
        $('.ui-state-default').hover(
            function(){ $(this).addClass('ui-state-hover'); },
            function(){ $(this).removeClass('ui-state-hover'); }
        );
        $('.ui-state-default').click(function(){ $(this).toggleClass('ui-state-active'); });
        $("#add-mail input").keydown(function(event){
            if(event.which == "13"){
                var val = $("#add-mail input").val();
                if(isNaN(val)){
                    return false;
                }
                var id = val + "_";
                //Evitar la repeticion de correos.
                if($("#" + id).length == 0){
                    $("<li>").attr("id", val + "_")
                        .append($("<span class='text btn'>").html(val))
                        .append($("<button title='Quitar de la lista' class='delete-email i_cross icon'>").attr("id", val))
                        .append($("<input type='hidden' name='Emails[]' />").attr("value", val))
                    .insertBefore("#add-mail");
                    $("#add-mail input").val("");
                }else{
                    $("#" + id).effect("highlight", {}, 1000);
                }
                event.preventDefault();
            }else if(event.which == "27"){
                $("#add-mail input").val("");
            }
        });

       $("#delete-all").click(function(){
           $("#list").remove(".email");
           return false;
       });
    });
    {/literal}
</script>

{/block}